<template>
  <div class="app-container towTabel">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.sid" class="w160">
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="渠道" v-model="formInline.flag" class="w160">
            <el-option label="支付宝" value="1"></el-option>
            <el-option label="微信" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="mini">
        <el-table-column align="center" label="机台编号">
          <template slot-scope="scope">
            {{scope.row.aname}}-{{scope.row.no}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="币值" prop="pulse"></el-table-column>
        <el-table-column align="center" label="首单支付次数" prop="first"></el-table-column>
        <el-table-column align="center" label="收款(元)">
          <template slot-scope="scope">
            {{scope.row.expense_money|keepTwoNum}}
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 总计 -->
      <el-table highlight-current-row show-summary :data="area_list" v-loading.body="listLoading" border element-loading-text="Loading" size="mini">
        <el-table-column align="center" label="区域" prop="aname"></el-table-column>
        <el-table-column align="center" label="收款" prop="expense_money">
          <template slot-scope="scope">
            {{scope.row.expense_money|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付总次数" prop="num"></el-table-column>
        <el-table-column align="center" label="机台总数量" prop="machine"></el-table-column>
        <el-table-column align="center" label="退款" prop="refund_money">
          <template slot-scope="scope">
            {{scope.row.refund_money|keepTwoNum}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, getPage, storeList } from '@/api/dashboard/statistic_scan';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  data() {
    return {
      list: [],
      listLoading: false,
      area_list: [],
      currentPage: 1,
      totalDataNumber: 0,
      store_list: null,
      formInline: {
        sid: '',
        flag: '2',
        start: '',
        end: '',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.store_list) {
        vm.getstore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getstore();
    },
    getstore() {
      storeList({ look_del: this.formInline.look_del, category_id: 71 }).then(response => {
        this.store_list = response;
        // console.log(response)
        let data = response.filter(res => res.id == this.$store.getters.optionId);

        if (data.length > 0) {
          this.formInline.sid = data[0].id;
        }
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          getList(this.formInline).then(response => {
            this.list = response.list;
            this.total = response.total;
            this.area_list = response.area;
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        this.list = response.list;
        this.listLoading = false;
      });
    }
  }
};
</script>